<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>01.固定列、不定高的瀑布流布局实现</title>
		<style>
			* {
				margin: 0;
				padding: 0;
				border: 0;
				list-style: none;
			}
			.clearfix:before,
			.clearfix:after {
				display: table;
				content: '';
			}
			.clearfix:after {
				clear: both;
			}
			.clearfix {
				*zoom: 1;
			}
			.fl {
				float: left;
			}
			.fr {
				float: right;
			}
			#ul1 {
				width: 1040px;
				margin: 100px auto 0;
			}
			#ul1 li {
				width: 247px;
				float: left;
				margin: 0 10px 0 0;
			}
			li div {
				border: 1px solid #000;
				padding: 10px;
				margin: 0 0 10px 0;
			}
			li img {
				width: 225px;
				display: block;
			}
			li p {
				width: 225px;
				word-break: break-all;
				margin: 10px 0 0 0;
			}
		</style>
		<script src="./js/ajax.js"></script>
		<script src="./js/JSON.js"></script>
		<script>
			window.onload = function () {
				var oUl = document.getElementById("ul1");
				var aLi = oUl.getElementsByTagName("li");
				var iLen = aLi.length;
				
				// 初始化数据处理
				ajax('GET', './php/getPics.php', 'cpage=1', function (data) {
					// alert(data);	
					var objData = JSON.parse(data);
					
					// alert(objData);
					
					for ( var i = 0; i < objData.length; i++ ) {
						// 获取高度最小Li的索引值
						var _index = getShortLi ();
						var oDiv = document.createElement("div");
						var oImg = document.createElement("img");
						oImg.src = objData[i].preview;
						oImg.style.width = '225px';
						// 让height跟着宽度来等比缩放
						oImg.style.height = objData[i].height * (225 / objData[i].width) + 'px';
						oDiv.appendChild(oImg);
						var oP = document.createElement("p");
						oP.innerHTML = objData[i].title;
						oDiv.appendChild(oP);
						aLi[_index].appendChild(oDiv);
					}
				});
				
				/**
				 * 获取高度最小Li的索引值
				 */
				function getShortLi () {
					var index = 0;
					var iH = aLi[index].offsetHeight;
					for ( var i = 1; i < iLen; i++ ) {
						if ( aLi[i].offsetHeight < iH ) {
							index = i;
							iH = aLi[i].offsetHeight;
						}
					}
					return index;
				}
			};
		</script>
	</head>
	<body>
		<ul id="ul1">
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</body>
</html>
